<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
    方法二：内嵌式，将代码写入head中，但
    -->
    <style>
        input{
            display: block;     width: 60px; 
            height: 40px;       background-color: rgb(140, 235, 100); 
            color: white;       border: 3px solid green;
            font-size: 22px;   font-family: '隶书';
            line-height: 30px; border-radius: 5px;
        }
    </style>

    <!-- 
    方法三：连接式，最推荐的一种方法
    rel->文件类型 href -> 路径
    -->
    <link rel="stylesheet" href="01css.css">
</head>
<body>
    <!-- 
    方法一：行内式，与html代码混合在一起，乱七八糟
    -->
    <input type="button" value="按钮" style="display: block;     width: 60px; 
    height: 40px;       background-color: rgb(140, 235, 100); 
    color: white;       border: 3px solid green;
    font-size: 22px;   font-family: '隶书';
    line-height: 30px; border-radius: 5px;">

</body>
</html>

